<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <div id="app" style="width: 100%">
    <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
    <ScaleScreen class="scale-wrap" height="100%" width="100%">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <!-- 头部 s -->
          <div class="d-flex jc-center title_wrap">
            <div class="zuojuxing"></div>
            <div class="youjuxing"></div>
            <div class="guang"></div>
            <div class="d-flex jc-center">
              <div class="title">
                <span class="title-text">电梯可视化平台</span>
              </div>
            </div>
            <div class="timers">
              {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            </div>
          </div>
          <!-- 头部 e-->
          <!-- 内容  s-->
          <div class="contents1">
            <div class="contetn_left">
              <div class="pagetab">
                <!-- <div class="item">实时监测</div> -->
              </div>
              <ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
                <LeftTop />
              </ItemWrap>
              <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
                <LeftCenter />
              </ItemWrap>
              <ItemWrap class="contetn_left-bottom contetn_lr-item" style="padding: 0 10px 16px 10px" title="设备提醒">
                <LeftBottom />
              </ItemWrap>
            </div>
            <div class="contetn_center">
              <CenterMap class="contetn_center_top" />
              <!--              <ItemWrap class="contetn_center-bottom" title="安装计划">-->
              <!--                <CenterBottom />-->
              <!--              </ItemWrap>-->
            </div>
            <div class="contetn_right">
              <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">
                <RightTop />
              </ItemWrap>
              <ItemWrap class="contetn_left-bottom contetn_lr-item" style="padding: 0 10px 16px 10px" title="报警排名(TOP8)">
                <RightCenter />
              </ItemWrap>
              <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
                <RightBottom />
              </ItemWrap>
            </div>
          </div>
          <!-- 内容 e -->
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>

<script>
import { formatTime2 } from "@/utils/index.ts";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import LeftCenter from "@/views/indexs/left-center.vue";
import LeftBottom from "@/views/indexs/left-bottom.vue";
import LeftTop from "@/views/indexs/left-top.vue";
import CenterMap from "@/views/indexs/center-map.vue";
import CenterBottom from "@/views/indexs/center-bottom.vue";
import RightBottom from "@/views/indexs/right-bottom.vue";
import RightCenter from "@/views/indexs/right-center.vue";
import RightTop from "@/views/indexs/right-top.vue";

export default {
  components: {
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
    CenterMap,
    LeftTop,
    LeftBottom,
    LeftCenter, ScaleScreen
  },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeUnmount() {
    clearInterval(this.timing);
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime2(new Date(), "HH: mm: ss");
        this.dateYear = formatTime2(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    }
  }
};
</script>

<style scoped>
@import "@/views/home.scss";
.contents1 {
  display: grid;
  justify-content: center; /* 居中容器的子元素（左右两侧和中间部分） */
  align-items: center; /* 垂直居中容器的子元素 */
  gap: 2rem;
  grid-template-columns: 1fr 1.5fr 1fr;

  .contetn_left,
  .contetn_right {
    box-sizing: border-box;
  }

  .contetn_lr-item {
    height: 310px;
  }

  .contetn_center_top {
    width: 100%;
  }

  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;


  }
}


@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
